var form,table;
var tableHandle;
var parentParameter;
var tableCols = [[
    {type:'checkbox'},
    {field:'name',align:'center',title:'名称'},
    {filed:'classify',align:'center',title:'分类'},
    {field:'price',align:'center',title:'原价'},
    {field:'unit',align:'center',title:'单位'},
    {field:'',algin:'center',align:'center',title:'操作',templet:'#tableOpearte'}
]];
var userSelectData = []; // 存放用户选中的数据
layui.use(['form','table'],function(){
    form = layui.form;
    table = layui.table;
    // 初次渲染表格
    tableHandle = renderTable({
        elem:"#selectTable",
        url:"http://192.168.0.22:3000/user/layuiData", // 测试数据 本地koa接口
        cols:tableCols,
        height:$(".wrap").height() - $(".head").height() - 15,
        preCall:function(res){
            var idArr = getAttribute(userSelectData);
            console.log(parentParameter)
            res.data.forEach(item=>{
                if(idArr.indexOf(item.id) !== -1){
                    item.LAY_CHECKED = true;
                }else{
                    item.LAY_CHECKED = false;
                }
            })
        }
    })
    table.on('checkbox(selectTable)', function(obj){
        debugger
        console.log(obj.checked); //当前是否选中状态
        console.log(obj.data); //选中行的相关数据
        console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        if(obj.type === 'one'){
            if(obj.checked){
                showTableBtn($(obj.tr),'show');
            }else{
                showTableBtn($(obj.tr),'hide');
            }
        }else{
            $(".tableWrap .layui-table-body tr").each(function(index,element){
                if(obj.checked){
                    showTableBtn($(this),'show');
                }else{
                    showTableBtn($(this),'hide');
                }
            })
        }
        setSelectData();
        console.log(userSelectData)
    });
    // 监听选择 和 取消 事件
    table.on('tool(selectTable)', function(obj){
        var layEvent = obj.event; 
        var tr = obj.tr;
        if(layEvent === 'select'){
            // 选中 则把当前行的checkbox选中
            $(tr).find('input[name=layTableCheckbox]').prop('checked',true);
            showTableBtn($(tr),'show');
            obj.update({LAY_CHECKED:true});
        }else{
            $(tr).find('input[name=layTableCheckbox]').prop('checked',false);
            showTableBtn($(tr),'hide');
            obj.update({LAY_CHECKED:false})
        }
        setSelectData();
        console.log(userSelectData)
        form.render('checkbox')
    })
})
// 表格中选择与隐藏按钮的控制
function showTableBtn(target,type){
    if(type === 'show'){
        target.find('button.show-button').hide().next('button').show();
    }
    if(type === 'hide'){
        target.find('button.show-button').show().next('button').hide();
    }
}
// 渲染表格
function renderTable(obj){
    var  obj = typeof obj === 'object' ? obj : {};
    var o = table.render({
        page:true,
        elem:obj.elem,
        url:obj.url,
        cols:obj.cols,
        height:obj.height,
        parseData:obj.preCall
    })
    return o;
}
// 根据LAY_CHECKED 来判断用户选中的数据
function setSelectData(){
    layui.table.cache.selectTable.forEach((item,index)=>{
        if(item.LAY_CHECKED){
            var idArr = getAttribute(userSelectData,'id');
            if(idArr.indexOf(item.id) === -1){
                userSelectData.push(item);
            }
        }else{
            userSelectData.forEach((i,index)=>{
                if(i.id == item.id){
                    userSelectData.splice(index,1);
                }
            })
        }
    })
}
// 根据某个属性获取对象数组中的值 组成新新数组
function getAttribute(origin,attr){
    var arr = [];
    origin.forEach(item=>{
        arr.push(item[attr])
    })
    return arr;
}